<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">
<div id="app">
    <!--    新增试题-->
    <!--    <div class="content-header common-search-border1">-->
    <!--        <el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增试题-->
    <!--        </el-button>-->
    <!--    </div>-->

    <div class="app-container">
        <!--        下面-->
        <div class="box common-table-border" style="margin:8px 0 0;">
            <!--            tag栏-->
            <!--            <el-tabs v-model="requestParameters.activeTabName" type="card" @tab-click="handleSearch">-->
            <!--                <el-tab-pane label="全部" name="1"></el-tab-pane>-->
            <!--                <el-tab-pane label="待审核" name="2"></el-tab-pane>-->
            <!--                <el-tab-pane label="已审核" name="3"></el-tab-pane>-->
            <!--            </el-tabs>-->

            <el-table :data="items" fit highlight-current-row style="width: 100%;">
                <el-table-column label="序号" align="center" width="50px">
                    <template slot-scope="scope">
                        <span>{{ scope.$index+1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="测评名称" align="center" width="300px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <!--按钮-->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="450px">
                    <template slot-scope="scope">
                        <div class="operation">
                            <el-button-group>
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
                                           ><i
                                        class="fa fa-pencil-square-o"
                                        aria-hidden="true"></i> 开始答题
                                </el-button>
                                <el-button type="primary" size="mini" @click="handlePreview(scope.row)" ><i
                                        class="fa fa-superpowers"
                                        aria-hidden="true"></i> 查看结果
                                </el-button>
                            </el-button-group>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        v-show="pagination.total>0"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../js/base.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pagination: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 10
                },
                loading: false,
                items: [],
                baseData: base,
                requestParameters: {
                    reviewStatus: '-1',
                    courseId: '',
                    status: 0,
                    difficulty: '',
                    type: '',
                    keyWord: ''
                },
                courses: [],
                is_classic: 1
            }
        },
        created() {
            // 学科下拉列表
            // this.initCourses();
            // 试题分页列表
            this.getList();
        },
        filters: {
            typeTransform: (type, types) => {
                let item = types.find(val => {
                    return val.id === type;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            },
            dateTransform: (value) => {
                let index = value.lastIndexOf('.');
                return value.substr(0, index);
            },
            difficultyTransform: (difficulty, difficultys) => {
                let item = difficultys.find(val => {
                    return val.id === difficulty;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            },
            reiviewStatusTransform: (status, reiviewStatus) => {
                let item = reiviewStatus.find(val => {
                    return val.id === status;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            },
            publishStatusTransform: (status, publishStatus) => {
                let item = publishStatus.find(val => {
                    return val.id === status;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            }
        },
        methods: {
            // 学科下拉列表
            /*initCourses() {
                let t = this;

                // 必传参数
                let params = {
                    status: 0
                };
                console.log("学科下拉列表请求参数：");
                console.log(params);
                let response = {
                    data: {
                        "flag": true,
                        "message": "获取列表成功",
                        "result": [
                            {
                                "catalogList": [
                                    {
                                        "id": 1,
                                        "name": "Java基础"
                                    },
                                    {
                                        "id": 2,
                                        "name": "JavaWeb"
                                    },
                                    {
                                        "id": 3,
                                        "name": "Spring MVC"
                                    },
                                    {
                                        "id": 4,
                                        "name": "Spring boot"
                                    },
                                    {
                                        "id": 8,
                                        "name": "进程线程"
                                    },
                                    {
                                        "id": 13,
                                        "name": "aaaa"
                                    }
                                ],
                                "id": 1,
                                "name": "Java"
                            },
                            {
                                "catalogList": [
                                    {
                                        "id": 5,
                                        "name": "Python基础"
                                    },
                                    {
                                        "id": 6,
                                        "name": "函数编程"
                                    },
                                    {
                                        "id": 7,
                                        "name": "面向对象编程"
                                    }
                                ],
                                "id": 2,
                                "name": "Python"
                            },
                            {
                                "catalogList": [],
                                "id": 3,
                                "name": "大数据"
                            },
                            {
                                "catalogList": [],
                                "id": 4,
                                "name": "Php"
                            },
                            {
                                "catalogList": [],
                                "id": 8,
                                "name": "888"
                            },
                            {
                                "catalogList": [],
                                "id": 9,
                                "name": "2"
                            }
                        ]
                    }
                }

                t.courses = response.data.result;
            },*/
            // 试题分页列表
            getList() {
                let t = this;
                // 必传参数
                let params = {
                    currentPage: t.pagination.currentPage,
                    pageSize: t.pagination.pageSize
                };
                // 选传参数
                let queryParams = {};
                let courseId = t.requestParameters.courseId;
                if (courseId !== '') {
                    queryParams.courseId = courseId;
                }
                let difficulty = t.requestParameters.difficulty;
                if (difficulty !== '') {
                    queryParams.difficulty = difficulty;
                }
                let type = t.requestParameters.type;
                if (type !== '') {
                    queryParams.type = type;
                }
                let keyWord = t.requestParameters.keyWord;
                if (keyWord !== '') {
                    queryParams.keyWord = keyWord;
                }
                if (Object.keys(queryParams).length) {
                    params.queryParams = queryParams;
                }
                axios.post('/course/findPageByUser.do', this.pagination).then(response => {
                    if (response.data.flag) {
                        t.pagination.total = response.data.result.total; //给总数量赋值
                        t.items = response.data.result.records;  //给列表List赋值
                        t.loading = true;
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
            },
            //清除
            handleRest() {
                if (this.$refs['requestParameters']) {
                    this.$refs['requestParameters'].resetFields();
                }
            },
            //搜索
            handleSearch() {
                this.getList();
            },
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getList();
            },
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getList();
            },
            // 新增试题
            handleCreate() {
                window.location.href = "questionEditor.html?questionId=0&is_classic=" + this.is_classic;
            },
            // 审核试题
            handleExamine(row) {
                window.location.href = "questionPreview.html?questionId=" + row.id + "&is_classic=" + this.is_classic +
                    "&is_examine=1";
            },
            // 预览试题
            handlePreview(row) {
                // window.location.href = "questionPreview.html?questionId=" + row.id + "&is_classic=" + this.is_classic +
                //     "&is_examine=0";
                window.location.href = "result-stu.html";
            },
            // 修改试题
            handleUpdate(row) {
                window.location.href = "exam-stu3.html?courseId=" + row.id;
            },
            // 试题下架
            handleOff(row) {
                this.$confirm('此操作将下架试题 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let params = {
                        questionId: row.id
                    };
                    console.log("试题下架请求参数：");
                    console.log(params);

                    let response = {
                        "flag": true,
                        "message": "试题下架成功"
                    };
                    console.log("试题下架返回数据：");
                    console.log(response);
                    if (response.flag) {
                        this.$message.success(response.message);
                    }
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            },
            // 删除试题
            handleDeleted(row) {
                this.$confirm('此操作将永久删除试题 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let params = {
                        questionId: row.id
                    };
                    console.log("试题删除请求参数：");
                    console.log(params);

                    let response = {
                        "flag": true,
                        "message": "试题删除成功"
                    };
                    console.log("试题删除返回数据：");
                    console.log(response);
                    if (response.flag) {
                        this.$message.success(response.message);
                    }
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            }
        }
    })
</script>
</html>
